<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/head.css" />
		<link rel="stylesheet" href="css/product_details.css" />
	</head>
	<body>
		<header id="head"></header>
		<div class="container p-0 mt-2">
			<a href="javascript:;" id="back">返回列表</a>
			<!--中间图片-->
			<div class="row">
				<div class=" p-0 col-md-1 col-sm-12">

					<div id="xc-img" class="d-inline-block pt-2 mx-0 m-auto">
						<!--图片路径-->
						<ul class="list-unstyled mb-0" id="tupianlujing"></ul>
					</div>
				</div>
				<div id="preview" class="col-md-7 col-sm-12 pr-0 float-left">
					<div class="card bg-transparent mr-5 position-absolute">
						<img class="card-img-top" src="img/product_detail/img1.jpg" alt="Card image cap">

						<div id="mask" class="position-absolute d-none"></div>
						<div id="super-mask" class="position-absolute"></div>
						<div id="div-lg" class="position-absolute d-none"></div>
					</div>
				</div>
				<!--右边内容：颜色，尺码，数量...-->
				<div class="col-md-4 col-sm-12 p-0">
					<div class="border-bottom pb-2" id="xc_xx"></div>
					<span class="d-block text-danger" id="span-color">请选择颜色</span>
					<ul class="pt-2 list-unstyled d-flex m-0">
						<li>
							<p>颜色：</p>
						</li>
						<li id="color">
							<div class="d-flex" id="xc-color"></div>
						</li>
					</ul>
					<div>
						<span class="d-block text-danger" id="span-size">请选择尺码</span>
						<div class="d-flex ">
							<div>尺寸：</div>
							<ul class="d-flex list-unstyled m-0" id="xc-sizes"></ul>

						</div>

						<!--数量，...-->
						<div class="d-flex p-1">
							<div class="pt-1">数量：</div>
							<div id="btn" class="d-flex">
								<button class="btn btn-secondary xc_btn">-</button>
								<span class="text-center xc_input">1</span>
								<button class="btn btn-primary xc_btn">+</button>
							</div>
						</div>
						<div class="mt-2">
							<a href="#" class="btn btn-danger">立即购买</a>
							<a href="#" class="btn btn-primary" id="xz-shopping">加入购物车</a>
						</div>
						<p class="pt-2"><a href="#" class="xc_small text-muted">加入我的心愿单</a></p>
						<span class="xc_small">
							价格说明<br>
							划线价格：划线的价格可能是商品的专柜价吊牌价或正品零售价指导价或该商品的曾经展示过的销售价等，仅供您参考。<br>
							未划线价格：未划线的价格是商品在本平台上的销售标价，具体的成交价格可能因顾客使用优惠券等情况发生变化，最终以订单结算页价格为准。<br>

						</span>
					</div>
				</div>
				<!--详情-->
				<div class="row pt-5">
					<div class="col-md-1"></div>
					<div class="col-md-11">
						<h5 class="text-primary" id="xc_miaoshu">商品描述</h5>
						<p class="pt-3" id="xc-ms"></p>
					</div>
				</div>
			</div>
		</div>
		<iframe src="foot.html" id="footer" scrolling="no"></iframe>

		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/jquery.cookie.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/head.js"></script>
		<script src="js/details.js"></script>
	</body>
</html>
